<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Label styles</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      /*
      NOTE: dygraphs does set some properties on the built-in legend, e.g.
      background-color and left. If you wish to override these, you can add
      "!important" to your CSS styles, as below.

      The full list of styles for which this is necessary are listed in
      plugins/legend.js. They are:
      o position
      o font-size
      o z-index
      o width
      o top
      o left
      o background
      o line-height
      o text-align
      o overflow
      */
      #div_g14 .dygraph-legend {
        width: 100px;
        background-color: transparent !important;
        left: 40px !important;
      }
    </style>
  </head>
  <body>
    <p>Labels are transparent and repositioned:</p>
    <div id="div_g14" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      g14 = new Dygraph(
            document.getElementById("div_g14"),
            NoisyData, {
              rollPeriod: 14,
              errorBars: true,
              labelsSeparateLines: true,
              yAxisLabelWidth: 20
            }
          );
    </script>
  </body>
</html>
